Telegram Group & Telegram Channel
💻 UI дизайн для No-code разработчика: типографика

Совсем недавно мы рассказали о теории цвета в цифровом дизайне. Если вы пропустили нашу предыдущую рассылку, то советуем почитать пост на эту тему. А сегодня мы расскажем про типографику.

Главные принципы и советы по работе с типографикой в digital-проекте ⬇️

⭐️ Чтение в вебе и на мобилках отличается от чтения книг. Книги читаем построчно сверху вниз, в вебе текст читаем по Z-траектории — когда глаза скользят по веб-странице слева направо, потом делают скачок по диагонали налево, оттуда снова направо. Люди сканируют веб-страницы, так что надо давать то, за что взгляд сможет зацепиться. Поэтому важно уделять внимание вёрстке.

⭐️ Чтобы разнообразить вёрстку и увеличить «сканируемость» страницы, — дробите на абзацы, вводите подзаголовки, работайте с весом шрифтовой группы — увеличивайте и уменьшайте жирность для одного и того же шрифта.

⭐️ Не рекомендуется использовать в проекте более двух шрифтов. А лучше — взять один. Если берётся два шрифта, то они должны сочетаться. Подобрать шрифтовую пару можно, например, на Fontjoy, Typotheque, Mixfont и проч.

⭐️ Учитывайте уместность шрифта. Например, в SaaS-сервисе неуместно использовать рукописный, меловой шрифт. Он подойдёт, к примеру, проекту для школьников. В спортивном приложении странно будет смотреться курсивный шрифт — он лучше подойдёт для книжного приложения, и то для заголовков.

⭐️ Осторожно обращайтесь с декоративными шрифтами. Их избыток повысит когнитивную нагрузку на пользователя и создаст лишний шум.

⭐️ Заголовок — всегда больше основного текста. Подойдёт не просто увеличенный кегль (размер шрифта в пикселях), но и написание капсом или заглавный шрифт.

⭐️ Основной текст плохо читается капсом и курсивом. Капс и курсив уместны в заголовке.

⭐️ В заголовке следует увеличивать межбуквенное расстояние. В основном тексте — межстрочное.

⭐️ В вебе лучше делать более узкие колонки текста, увеличивая межстрочное расстояние. В мобилках текст можно растягивать на всю ширину экрана.

⭐️ Предпочтительный минимальный кегль для веба и приложений — 16рх, для Android — 12рх и для iOS — 11рх.



Конечно, это лишь малая часть информации о большом и сложном мире цифрового дизайна. Если вы хотите освоить все тонкости digital-дизайна, научиться делать красивые, эффективные и высокооплачиваемые IT-продукты в любых форматах, — тогда ждём на курсе «Профессия No-code разработчик», который стартует уже в четверг, 3 августа!

💰Стать высокооплачиваемым специалистом:
codebreakers.tech/profession



tg-me.com/code_breakers/579
Create:
Last Update:

💻 UI дизайн для No-code разработчика: типографика

Совсем недавно мы рассказали о теории цвета в цифровом дизайне. Если вы пропустили нашу предыдущую рассылку, то советуем почитать пост на эту тему. А сегодня мы расскажем про типографику.

Главные принципы и советы по работе с типографикой в digital-проекте ⬇️

⭐️ Чтение в вебе и на мобилках отличается от чтения книг. Книги читаем построчно сверху вниз, в вебе текст читаем по Z-траектории — когда глаза скользят по веб-странице слева направо, потом делают скачок по диагонали налево, оттуда снова направо. Люди сканируют веб-страницы, так что надо давать то, за что взгляд сможет зацепиться. Поэтому важно уделять внимание вёрстке.

⭐️ Чтобы разнообразить вёрстку и увеличить «сканируемость» страницы, — дробите на абзацы, вводите подзаголовки, работайте с весом шрифтовой группы — увеличивайте и уменьшайте жирность для одного и того же шрифта.

⭐️ Не рекомендуется использовать в проекте более двух шрифтов. А лучше — взять один. Если берётся два шрифта, то они должны сочетаться. Подобрать шрифтовую пару можно, например, на Fontjoy, Typotheque, Mixfont и проч.

⭐️ Учитывайте уместность шрифта. Например, в SaaS-сервисе неуместно использовать рукописный, меловой шрифт. Он подойдёт, к примеру, проекту для школьников. В спортивном приложении странно будет смотреться курсивный шрифт — он лучше подойдёт для книжного приложения, и то для заголовков.

⭐️ Осторожно обращайтесь с декоративными шрифтами. Их избыток повысит когнитивную нагрузку на пользователя и создаст лишний шум.

⭐️ Заголовок — всегда больше основного текста. Подойдёт не просто увеличенный кегль (размер шрифта в пикселях), но и написание капсом или заглавный шрифт.

⭐️ Основной текст плохо читается капсом и курсивом. Капс и курсив уместны в заголовке.

⭐️ В заголовке следует увеличивать межбуквенное расстояние. В основном тексте — межстрочное.

⭐️ В вебе лучше делать более узкие колонки текста, увеличивая межстрочное расстояние. В мобилках текст можно растягивать на всю ширину экрана.

⭐️ Предпочтительный минимальный кегль для веба и приложений — 16рх, для Android — 12рх и для iOS — 11рх.



Конечно, это лишь малая часть информации о большом и сложном мире цифрового дизайна. Если вы хотите освоить все тонкости digital-дизайна, научиться делать красивые, эффективные и высокооплачиваемые IT-продукты в любых форматах, — тогда ждём на курсе «Профессия No-code разработчик», который стартует уже в четверг, 3 августа!

💰Стать высокооплачиваемым специалистом:
codebreakers.tech/profession

BY Code Breakers | No-code solutions


Warning: Undefined variable $i in /var/www/tg-me/post.php on line 283

Share with your friend now:
tg-me.com/code_breakers/579

View MORE
Open in Telegram


Code Breakers | No code solutions Telegram | DID YOU KNOW?

Date: |

Telegram Auto-Delete Messages in Any Chat

Some messages aren’t supposed to last forever. There are some Telegram groups and conversations where it’s best if messages are automatically deleted in a day or a week. Here’s how to auto-delete messages in any Telegram chat. You can enable the auto-delete feature on a per-chat basis. It works for both one-on-one conversations and group chats. Previously, you needed to use the Secret Chat feature to automatically delete messages after a set time. At the time of writing, you can choose to automatically delete messages after a day or a week. Telegram starts the timer once they are sent, not after they are read. This won’t affect the messages that were sent before enabling the feature.

Code Breakers | No code solutions from kr


Telegram Code Breakers | No-code solutions
FROM USA